<!-- 详细图表 -->
<template>
	<view class="detailsChartBox">
		<view class="detailsChartBox_top">
			<view class="detailsChartBox_top_topbox" v-for="(item,index) in itemList" :key="index"
				@click="itemClick(item)" v-show="item.isTrue">
				<view class="detailsChartBox_top_topbox_item" >
					
						<view class="dianBox">
							<image :src="activeImg===item.unitName?'../../static/chart/l.png':item.dian" mode="">
							</image>
						</view>
						<view class="iconImg">
							<image :src="item.iconPath" mode=""></image>
						</view>
						<view class="unitName">{{item.unitName}}</view>
						<view :style={color:item.color}><span class="unitNum">{{item.unitNum}}</span><span
								class="symbol">{{item.symbol}}</span> </view>
					
				</view>
			</view>


		</view>
		<view class="detailsChartBox_bottom">
			<view class="detailsChartBox_bottom_top">
				<view class="detailsChartBox_bottom_top_left"><span class="lei">{{activeImg}}</span> <span
						class="sub">(24小时数据)</span></view>
				<view class="detailsChartBox_bottom_top_right">更新时间:{{newTime}}</view>
			</view>
			<view class="detailsChartBox_bottom_bottom">
				<view class="detailsChartBox_bottom_bottom_chartBox">
					<qiun-data-charts v-if="showEcharts" type="line" :opts="line_opts" :chartData="echartsList"
						:canvas2d="true" canvasId="CanvasId" :ontouch="true" />
					<view class="nomore" v-else>
						<view class="imgbox">
							<image style="width: 100%;height: 100%; " src="../../static/chart/nomore.png" mode="" />
						</view>
						<view class="empbox">
							暂无数据
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useWebsocket
	} from "@/store/websocket.js";
	let {
		proxy
	} = getCurrentInstance();
	const useWeb = useWebsocket()
	import {
		onMounted,
		nextTick,
		reactive,
		ref,
		watch,
		getCurrentInstance
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	const activeImg = ref('温度')
	const newTime= ref('')
	const itemList = reactive([{
			dian: '../../static/chart/w.png',
			iconPath: '../../static/chart/wd.png',
			unitName: '温度',
			unitNum: '0',
			symbol: '℃',
			color: '#0F55B7',
			isTrue: true
		},
		{
			dian: '../../static/chart/w.png',
			iconPath: '../../static/chart/wc.png',
			unitName: '温差',
			unitNum: '0',
			symbol: '℃',
			color: '#00C188',
			isTrue: true

		},
		{
			iconPath: '../../static/chart/gl.png',
			unitName: '上游功率',
			unitNum: '0',
			symbol: '%',
			color: '#2D8DFC',
			isTrue: true
		},
		{
			iconPath: '../../static/chart/gl.png',
			unitName: '下游功率',
			unitNum: '0',
			symbol: '%',
			color: '#2D8DFC',
			isTrue: true
		},
		{
			dian: '../../static/chart/w.png',
			iconPath: '../../static/chart/fy.png',
			unitName: '负压',
			unitNum: '0',
			symbol: 'KPa',
			color: '#2D8DFC',
			isTrue: true
		}
	])
	const showEcharts = ref(true)
	const line_opts = ref({

		color: [
			"#1890FF",
			"#91CB74",
			"#FAC858",
			"#EE6666",
			"#73C0DE",
			"#3CA272",
			"#FC8452",
			"#9A60B4",
			"#ea7ccc",
			"#527F76",
			"#A68064",
		],
		padding: [15, 20, 0, 20],
		enableScroll: true,
		legend: {},
		xAxis: {
			disableGrid: true,
			scrollShow: true,
			itemCount: 7,
		},

		yAxis: {
			gridType: "dash",
			dashLength: 2,
			tofix:0,
			max:0,
			min:0,
			unit:'℃'
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
			},
		},
	});
	let echartsList = reactive({
		categories: [],
		records: {},
		series: []
	});
	
	const setTime=()=>{
		let date = new Date()
		let year = date.getFullYear()
		let month = date.getMonth() + 1
		month >= 9 ? month : month = '0' + month
		let day = date.getDate()
		day >= 9 ? day : day = '0' + day
		let hour = date.getHours()
		hour >= 9 ? hour : hour = '0' + hour
		let minute = date.getMinutes()
		minute >= 9 ? minute : minute = '0' + minute
		let second = date.getSeconds()
		second >= 9 ? second : second = '0' + second
		newTime.value = year + '-' + month + '-' + day + "  " + hour + ":" + minute + ":" + second
		
	}
	
	const itemClick = (it) => {
		setTime()
		if (it.unitName != '上游功率' && it.unitName != '下游功率') {
			activeImg.value = it.unitName
			
		}
		setCharts()
	}
	watch(()=>useWeb.allResObj,(newVal,oldVal)=>{
		newVal.map((item, index) => {
			if (String(item.tableId) === tableId.value) {
				itemList[0].unitNum = item.temp[isIndex.value]
				itemList[1].unitNum = item.td[isIndex.value]
				
				
				
				if (item.frameName.includes('测压架')) {
					
					if(item.np){
						itemList[4].unitNum = item.np?item.np[isIndex.value]:'0'
					}else{
						itemList[4].isTrue = false
					}
					
		
				} else {
					if(item.upPower&&item.downPower){
						itemList[2].unitNum = item.upPower[isIndex.value]
						itemList[3].unitNum = item.downPower[isIndex.value]
					}else{
						itemList[2].isTrue = false
						itemList[3].isTrue = false
					}
					
					
		
				}
			}
		})
	},{deep:true})
	const tableId = ref(0)
	const isIndex = ref(0)
	
	const setCharts=()=>{
		let opts = {
			url: proxy.$api.getMiniChart,
			method: "get",
		};
		let data = {
			tableId: tableId.value,
			index: isIndex.value,
		
		};
		echartsList.series=[]
		proxy.$request.httpTokenRequest(opts, data).then((res) => {
			if (res.data.code === 200) {
				
				if(res.data.result.times.length>0){
					showEcharts.value=true
					
					
					echartsList.categories=res.data.result.times
					res.data.result.series.map((item,index)=>{
						if(item.name===activeImg.value){
							echartsList.series.push(item)
							if(item.name==='温度'||item.name==='温差'){
								line_opts.value.yAxis.unit='℃'
								if(item.name==='温度'){
									line_opts.value.yAxis.max=Math.max(...item.data.map(Number))+300
									line_opts.value.yAxis.min=Math.min(...item.data.map(Number))-300
								}else{
									line_opts.value.yAxis.max=Math.max(...item.data.map(Number))+50
									line_opts.value.yAxis.min=Math.min(...item.data.map(Number))-50
								}
								
							}else{
								line_opts.value.yAxis.unit='KPa'
								line_opts.value.yAxis.max=Math.max(...item.data.map(Number))+80
								line_opts.value.yAxis.min=Math.min(...item.data.map(Number))-80
							}
							
						}
					})
					
				}else{
					showEcharts.value=false
				}
			}else{
				proxy.$refs.uToast.show({
					type: 'error',
					message: res.data.message
				})
			}
		}).catch((err) => {
			proxy.$refs.uToast.show({
				type: 'error',
				message: err.message
			})
		})
	}

	onLoad((option) => {
		setTime()
		uni.setNavigationBarTitle({
			title: `${decodeURIComponent(option.frameName)}-${option.item}`
		})
		tableId.value = option.tableId
		isIndex.value = option.item - 1
		
		useWeb.allResObj.map((item, index) => {
			if (String(item.tableId) === option.tableId) {
				itemList[0].unitNum = item.temp[isIndex.value]
				itemList[1].unitNum = item.td[isIndex.value]
				if (item.frameName.includes('测压架')) {
					if(item.np){
						itemList[4].unitNum = item.np?item.np[isIndex.value]:'0'
					}else{
						itemList[4].isTrue = false
					}
					
					
					itemList[2].isTrue = !itemList[2].isTrue
					itemList[3].isTrue = !itemList[3].isTrue

				} else {
					itemList[4].isTrue = false
					if(item.upPower&&item.downPower){
						itemList[2].unitNum = item.upPower[isIndex.value]
						itemList[3].unitNum = item.downPower[isIndex.value]
					}else{
						itemList[2].isTrue = false
						itemList[3].isTrue = false
					}

				}
			}
		})
		setCharts()


	})
</script>
<style>
	page {
		background-color: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	.detailsChartBox {

		&_top {

			padding: 32rpx 32rpx 0 32rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			&_topbox {
				padding: 28rpx 32rpx;
				box-sizing: border-box;
				width: 326rpx;
				height: 280rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin-bottom: 34rpx;
				position: relative;
				

				&_item {
					
					.dianBox {
						width: 60rpx;
						height: 60rpx;
						position: absolute;
						right: 5rpx;
						top: 8rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.iconImg {
						width: 70rpx;
						height: 70rpx;
						margin-bottom: 18rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.unitName {
						margin-bottom: 16rpx;
						font-size: 28rpx;
						color: #000;
					}

					.unitNum {
						font-weight: 550;
						font-size: 40rpx;
					}

					.symbol {
						font-size: 24rpx;

					}
				}

				

			}
			.detailsChartBox_top_topbox:last-child {
				margin-bottom: 0;
			}



		}

		&_bottom {
			margin-top: 24rpx;

			&_top {
				padding: 0 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&_left {
					.lei {
						font-weight: 550;
						font-size: 28rpx;
						color: #000000;
					}

					.sub {
						font-size: 20rpx;
						color: #333333;
						margin-left: 8rpx;
					}
				}

				&_right {
					font-size: 20rpx;
					color: #333333;
				}

			}

			&_bottom {
				padding: 24rpx 16rpx;
				box-sizing: border-box;

				&_chartBox {


					width: 100%;
					height: 594rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
					border-radius: 4rpx 4rpx 4rpx 4rpx;

					.nomore {
						display: flex;
						flex-direction: column;
						align-items: center;
						padding-top: 100rpx;

						.imgbox {
							width: 50%;
							height: 300rpx;
						}
					}
				}
			}


		}
	}
</style>